<template>
    <div class="layout_box">
        <leftNav></leftNav>
        <div class="layout_right">
            <Top></Top>
            <NavOptionsBar></NavOptionsBar>
            <div class="content">
                <div class="content_box">
                    <RouterView v-slot="{ Component }">
                        <transition name="fade" mode="out-in">
                            <component :is="Component" />
                        </transition>
                    </RouterView>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import leftNav from "./components/left_nav.vue";
import Top from "./components/top.vue";
import NavOptionsBar from "./components/nav_options_bar.vue";
import { useRoute } from "vue-router";
import { watch, ref } from "vue";
const router = useRoute();
const contentAnimation = ref("");
</script>
<style lang="scss" scoped>
.layout_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
}

.layout_right {
    text-indent: 10px;
    flex: 1;
}

.content {
    background: #eee;
    padding-top: 8px;
    width: 100%;
    height: 88%;
    overflow: hidden;
}

.content_box {
    width: 99%;
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    height: 99%;
}

.content_box > div {
    min-height: 800px;
}
.fade-enter-from {
    opacity: 0;
    transform: translateX(-100%);
}

.fade-enter-to {
    transform: translateX(0%);
    opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
    transition: all 0.2s ease-out;
}

.fade-leave-from {
    transform: translateX(0%);
    opacity: 1;
}

.fade-leave-to {
    transform: translateX(100%);
    opacity: 0;
}
</style>
